layui.define(["element", "laytpl", "jquery", "layer"], function(exports) {
	var element = layui.element,
		$ = layui.$,
		laytpl = layui.laytpl,
		layer = layui.layer,
		cityData = [],
		cityValue = [],
		data = null,
		options = null,
		li = $("<li></li>").addClass("layui-nav-item"),
		provinceDl = $("<dl></dl>").addClass("layui-nav-child layui-anim layui-anim-upbit"),
		cityDl = $("<dl></dl>").addClass("layui-nav-child layui-anim layui-anim-upbit"),
		countyDl = $("<dl></dl>").addClass("layui-nav-child layui-anim layui-anim-upbit")

	
	var base = {
		/**
		 * @param option 对象参数: [inputName(表单 name 属性名称), inputId(单 id 属性名称), time(视频时长), placeholder(提示), layVerify(验证)]
		 * @returns {any}
		 */
		render: function(option){
			options = option
			$(options.elem).append($("<input />").addClass("layui-input").attr({
				"type": "text",
				"placeholder": options.placeholder || "选择省市区",
				"autocomplete": "off",
				"lay-verify": options.layVerify || "cascader",
				//"readonly": "readonly",
				"name": options.inputName || "cascader",
				"id": options.inputId || ""
			}))
			
			$(options.elem).find("input:not(.layui-hide)").on("keyup paste", function() {
				$(options.elem).find("input.layui-hide").val($("#city-text").text()+$(this).val())
			});
			
			$(options.elem).append(
				$("<div></div>")
				.addClass("city-box")
				.append(
					$("<i></i>")
					.addClass("layui-icon layui-icon-location")
					.css("background-color", options.theme?(options.theme.color||"#2196F3"):"#2196F3")
				)
				.append($("<span></span>").attr("id", "city-text"))
			)
			base.getData()
			base.listen()
			base.setCss()
			
			return towexinCascader
		},
		getData: function(){
			$.ajax({
				url: "/plug-in/city-json/province.json",
				"async": false,
				type: "GET",
				success: function(province){
					$.ajax({
						url: "/plug-in/city-json/city.json",
						"async": false,
						type: "GET",
						success: function(city){
							$.ajax({
								url: "/plug-in/city-json/county.json",
								"async": false,
								type: "GET",
								success: function(county){
									data = [province, city, county]
								}
							})
						}
					})
				}
			})
		},
		listen: function(){
			if(options.height){
				provinceDl.css("max-height", options.height)
				cityDl.css("max-height", options.height)
				countyDl.css("max-height", options.height)
			}
			
			$.each(data[0], function(index, d){
				provinceDl.append($("<dd></dd>").append($("<a></a>").text(d.name).append($("<i></i>").addClass("layui-icon layui-icon-right")).attr("href", "javascript:;")))
			})
			li.append(provinceDl).append(cityDl).append(countyDl).appendTo($(options.elem))
			
			$(options.elem).find(".city-box").click(function(event){
				event.stopPropagation();
				if($($(options.elem).find(".layui-nav-child")[1]).hasClass("layui-show")){
					$(options.elem).find(".layui-nav-child").removeClass("layui-show")
					return
				}
				
				$(options.elem).find(".layui-nav-child").children("dd").removeClass("layui-this")
				if(cityData.length==0){
					if($($(options.elem).find(".layui-nav-child")[0]).hasClass("layui-show")){
						$(options.elem).find(".layui-nav-child").removeClass("layui-show")
					}else{
						$($(options.elem).find(".layui-nav-child")[0]).addClass("layui-show")
					}
				}else{
					$.each(data[0], function(i, p){
						if(p.id==cityData[0].id){
							$($($(options.elem).find(".layui-nav-child")[0]).children("dd")[i]).addClass("layui-this")
							cityDl.html("")
							$.each(data[1][p.id], function(j, c){
								if(c.id==cityData[1].id){
									cityDl.append($("<dd></dd>").addClass("layui-this").append($("<a></a>").text(c.name).append($("<i></i>").addClass("layui-icon layui-icon-right")).attr("href", "javascript:;")))
									
									countyDl.html("")
									$.each(data[2][c.id], function(k, u){
										if(u.id==cityData[2].id){
											countyDl.append($("<dd></dd>").addClass("layui-this").append($("<a></a>").text(u.name).attr("href", "javascript:;")))
										}else{
											countyDl.append($("<dd></dd>").append($("<a></a>").text(u.name).attr("href", "javascript:;")))
										}
									})
								}else{
									cityDl.append($("<dd></dd>").append($("<a></a>").text(c.name).append($("<i></i>").addClass("layui-icon layui-icon-right")).attr("href", "javascript:;")))
								}
							})
						}
					})
					
					$(options.elem).find(".layui-nav-child").addClass("layui-show")
					$(options.elem).find(".layui-nav-child").each(function(index, e){
						if(index==1){
							$(e).css("left", ($($(options.elem).find(".layui-nav-child")[0])[0].offsetWidth+5)+"px")
						}else if(index == 2){
							$(e).css("left", ($($(options.elem).find(".layui-nav-child")[0])[0].offsetWidth+10+$($(options.elem).find(".layui-nav-child")[1])[0].offsetWidth)+"px")
						}
					})
					$($(options.elem).find(".layui-nav-child")[0]).scrollTop($($(options.elem).find(".layui-nav-child")[0]).children("dd.layui-this")[0].offsetTop-5)
					$($(options.elem).find(".layui-nav-child")[1]).scrollTop($($(options.elem).find(".layui-nav-child")[1]).children("dd.layui-this")[0].offsetTop-5)
					$($(options.elem).find(".layui-nav-child")[2]).scrollTop($($(options.elem).find(".layui-nav-child")[2]).children("dd.layui-this")[0].offsetTop-5)
				}
				
			})
			
			$(options.elem).find(".layui-nav-child").on("click", "dd", function(){
				$(options.elem).find(".layui-nav-child").each(function(index, e){
					if(index==1){
						$(e).css("left", ($($(options.elem).find(".layui-nav-child")[0])[0].offsetWidth+5)+"px")
					}else if(index == 2){
						$(e).css("left", ($($(options.elem).find(".layui-nav-child")[0])[0].offsetWidth+10+$($(options.elem).find(".layui-nav-child")[1])[0].offsetWidth)+"px")
					}
				})
				
				let index = $(this).index(), parIndex = $(this).parent().index()
				let id = null
				
				if(parIndex==0){
					id = data[0][index].id
				}else if(parIndex==1){
					let i = $($(options.elem).find(".layui-nav-child")[0]).children("dd.layui-this").index()
					id = data[1][data[0][i].id][index].id
				}else{
					let i = $($(options.elem).find(".layui-nav-child")[0]).children("dd.layui-this").index()
					let j = $($(options.elem).find(".layui-nav-child")[1]).children("dd.layui-this").index()
					
					cityValue[0] = data[0][i].name
					cityValue[1] = data[1][data[0][i].id][j].name
					cityValue[2] = data[2][data[1][data[0][i].id][j].id][index].name
					cityValue[3] = ""
					console.log(cityValue)
					base.setValue(cityValue)
					options.success?options.success(cityData):null
				}
				
				if(parIndex!=$(options.elem).find(".layui-nav-child").length-1){
					if(parIndex==0){
						cityDl.html("")
						$.each(data[parIndex+1][id], function(i, d){
							cityDl.append($("<dd></dd>").append($("<a></a>").text(d.name).append($("<i></i>").addClass("layui-icon layui-icon-right")).attr("href", "javascript:;")))
						})
					}else{
						countyDl.html("")
						$.each(data[parIndex+1][id], function(i, d){
							countyDl.append($("<dd></dd>").append($("<a></a>").text(d.name).attr("href", "javascript:;")))
						})
					}
					$($(options.elem).find(".layui-nav-child")[parIndex+1]).addClass("layui-show").next().removeClass("layui-show")
				}
				
				
				$(this).nextAll().removeClass("layui-this")
				$(this).prevAll().removeClass("layui-this")
				$(this).addClass("layui-this")
			})
			
			$(options.elem).find(".layui-nav-item").click(function(event){
				event.stopPropagation()
			})
			$("body").click(function(){
				$(options.elem).find(".layui-nav-child").removeClass("layui-show")
			})
		},
		setCss: function(){
			$("html head").append($("<style></style>").text(".towexin-cascader{position: relative;}.towexin-cascader>input{padding-left: 40px;}.towexin-cascader .city-box{position: absolute;top: 50%;transform: translateY(-50%);left: 10px;height: 28px;padding-left: 30px;}.towexin-cascader .city-box>i{position: absolute;top: 50%;transform: translateY(-50%);left: 0;color: #fff;background-color: #2196F3;padding: 5px;border-radius: 50%;cursor: pointer;}.towexin-cascader .city-box>#city-text{line-height: 28px;}.towexin-cascader .layui-nav-child{top: 42px;min-width: 180px;max-height: 400px;overflow-y: auto;}.towexin-cascader .layui-nav-item a {display: block;padding: 0 20px;color: #fff;color: rgba(255,255,255,.7);transition: all .3s;-webkit-transition: all .3s;color: #333;position: relative;padding-right: 50px;}.towexin-cascader .layui-nav-child a:hover {background-color: #f2f2f2;color: #000;}.towexin-cascader .layui-nav-child a>i{position: absolute;right: 10px;font-size: 12px;}.towexin-cascader .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this {background-color: "+ (options.theme?options.theme.color||"#2196F3":"#2196F3") +";color: #fff;}.towexin-cascader>input:not(.layui-hide){transition: padding-left 0s;}.towexin-cascader *::-webkit-scrollbar {width: 3px;height: 3px;}"))
		},
		setValue: function(value){
			if(value.length==4){
				$.each(data[0], function(i, p){
					if(p.name==value[0]){
						cityData[0]=p
						$.each(data[1][p.id], function(j,c){
							if(c.name==value[1]){
								cityData[1]=c
								$.each(data[2][c.id], function(k, u){
									if(u.name==value[2]){
										cityData[2]=u
										return
									}
								})
								return
							}
						})
						return
					}
				})
				//$("#city-text").text(value[0]+value[1]+value[2])
				$(options.elem).find("input:not(.layui-hide)").val(value[0] + " " +value[1] + " " +value[2] + " " +value[3]).removeAttr("readonly").removeAttr("placeholder")
				$("#city-text").resize(function(d){
					$(options.elem).find("input:not(.layui-hide)").val(value[0] + " " +value[1] + " " +value[2] + " " +value[3]).removeAttr("readonly").removeAttr("placeholder")
				})
			}else{
				cityData=[], cityValue=[]
				$(options.elem).find(".layui-nav-child").children("dd").removeClass("layui-this")
				$("#city-text").text("")
				$(options.elem).find("input:not(.layui-hide)").val("").attr({"readonly": "readonly", "placeholder": "选择省市区"}).css("padding-left", ($("#city-text").width()+39)+"px")
				$("#city-text").resize(function(d){
					$(options.elem).find("input:not(.layui-hide)").val("").attr({"readonly": "readonly", "placeholder": "选择省市区"}).css("padding-left", ($("#city-text").width()+39)+"px")
				})
			}
			
		}
	}
	
	var towexinCascader = {
		render: function(option){
			return base.render(option);
		},
		setValue: function(value){
			return base.setValue(value)
		},
		getValue: function(type){
			if(type=="input") return $(options.elem).find("input.layui-hide").val();
			return cityData
		}
	}
	
	exports("towexinCascader", towexinCascader);
})
